<template>
  <div class="p24 page-miH page-bgBack">
    <!-- 头部信息 -->
    <div class="flex-center-between pb12">
      <div
        class="wb19 border_hover h75 color_fa border_dashed top_warp"
        v-for="(item, index) in topData"
        :key="index"
        style="padding-left: 24px"
        :class="active === index ? 'border_active' : ''"
        @click="onTopTabs(item, index)"
      >
        <img :src="item.url" style="width: 32px; height: 32px" :alt="item.title" />
        <div>
          <div class="top_title">{{ item.title }}</div>
          <CountTo :startVal="0" :endVal="item.num" :duration="2000" class="top_number" />
          <div></div>
        </div>
      </div>
    </div>
    <!-- 搜索区域 -->
    <div class="pb12 flex-center-between">
      <a-space>
        <a-input-search
          placeholder="搜索姓名/身份证"
          style="width: 200px"
          v-model="queryParams.nameOrIdCard"
          :defaultValue="queryParams.nameOrIdCard ? queryParams.nameOrIdCard : undefined"
          allow-clear
          @search="
            () => {
              this.queryParams.pageNo = 1;
              this.getList();
            }
          "
        />
        <a-select
          title
          style="min-width: 130px; width: 130px"
          placeholder="选择人员状态"
          allow-clear
          @change="handleProgName2"
          :defaultValue="rStatus"
        >
          <a-select-option v-for="item in liststatus" :key="item.id" style>{{ item.value }}</a-select-option>
        </a-select>
        <a-popover trigger="click" placement="bottom" v-model="searchVisible">
          <template slot="content">
            <div style="width: 900px">
              <a-form-model :model="form" ref="searchRef">
                <a-row type="flex">
                  <a-col :span="6">
                    <a-form-model-item label="社保状态">
                      <a-select
                        allowClear
                        placeholder="请选择社保状态"
                        v-model="form.empSocStatus"
                        :defaultValue="form.empSocStatus"
                        :options="socTypeSource"
                        style="width: 200px"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-model-item label="医保状态">
                      <a-select
                        allowClear
                        placeholder="请选择医保状态"
                        v-model="form.empMeStatus"
                        :defaultValue="form.empMeStatus"
                        :options="socTypeSource"
                        style="width: 200px"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-model-item label="公积金状态">
                      <a-select
                        allowClear
                        placeholder="请选择公积金状态"
                        v-model="form.empPfStatus"
                        :defaultValue="form.empPfStatus"
                        :options="socTypeSource"
                        style="width: 200px"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-model-item label="人员类型">
                      <a-select
                        allowClear
                        placeholder="请选择人员类型"
                        v-model="form.postType"
                        :defaultValue="form.postType"
                        :options="postTypeLst"
                        style="width: 200px"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-model-item label="参保方案">
                      <a-select
                        allowClear
                        v-model="form.socProgId"
                        :defaultValue="form.socProgId"
                        :options="progTypeOptions"
                        placeholder="请选择参保方案"
                        style="width: 200px"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-model-item label="参保城市">
                      <AreaPicker :level="1" :default-value="form.socCityId" style="width: 200px" @change="handleCity($event)" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-model-item label="参保时间">
                      <a-date-picker
                        v-model="form.empSocDate"
                        :defaultValue="form.empSocDate"
                        @change="(date, dateString) => (form.empSocDate = dateString)"
                        format="YYYY-MM-DD"
                        style="width: 200px"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-model-item label="停保时间">
                      <a-date-picker
                        :defaultValue="form.stopSocDate"
                        v-model="form.stopSocDate"
                        @change="(date, dateString) => (form.stopSocDate = dateString)"
                        format="YYYY-MM-DD"
                        style="width: 200px"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-model-item label="封存时间">
                      <a-date-picker
                        :defaultValue="form.sealedDate"
                        v-model="form.sealedDate"
                        @change="(date, dateString) => (form.sealedDate = dateString)"
                        format="YYYY-MM-DD"
                        style="width: 200px"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="社保账号">
                      <SelectWithInputAdd
                        v-model="socAccount"
                        editable
                        allowClear
                        mode="select"
                        dictCode="1220"
                        placeholder="社保账号"
                        style="width: 200px"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="医保账号">
                      <SelectWithInputAdd
                        v-model="meAccount"
                        editable
                        allowClear
                        mode="select"
                        dictCode="1221"
                        placeholder="医保账号"
                        style="width: 200px"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="公积金账号">
                      <SelectWithInputAdd
                        v-model="pfAccount"
                        editable
                        allowClear
                        mode="select"
                        dictCode="1222"
                        placeholder="公积金账号"
                        style="width: 200px"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="签约主体">
                      <SelectWithInputAdd
                        v-model="contractSubject"
                        editable
                        allowClear
                        mode="select"
                        dictCode="1223"
                        placeholder="签约主体"
                        style="width: 200px"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-model>
            </div>
            <div class="h48 boder_top mt12 flex-center-between align_center">
              <a-button type="link" icon="reload" @click="OnsearchRef"> 重置 </a-button>
              <div>
                <a-space>
                  <a-button @click="searchVisible = false">取消</a-button>
                  <a-button
                    type="primary"
                    @click="
                      () => {
                        this.searchVisible = false;
                        this.queryParams.pageNo = 1;
                        this.getList();
                      }
                    "
                  >
                    确认
                  </a-button>
                </a-space>
              </div>
            </div>
          </template>
          <a-button icon="filter" />
        </a-popover>
      </a-space>
      <a-space>
        <!-- <a-button @click="onBatchNormalSoc" :disabled="selectedRowKeys.length > 0 ? false : true">批量正常参保</a-button> -->
        <!-- <a-button id="SynDataButton" @click="onDataSyn" type="primary" ghost> 数据同步 </a-button> -->
        <a-button type="primary" v-if="tableData" @click="onExport"> 导出 </a-button>
      </a-space>
    </div>
    <!-- 表格区域 -->
    <a-table
      rowKey="empId"
      :loading="loading"
      :data-source="tableData"
      :scroll="{ x: 2500, y: 1000 }"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: tableChange,
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.empSocStatus === 0 || record.empSocStatus === 6 ? false : true, // Column configuration not to be checked
            name: record.name
          }
        })
      }"
      :pagination="false"
    >
      <a-table-column title="姓名" :width="130" :ellipsis="true" fixed="left">
        <template slot-scope="scope">
          <div style="position: relative">
            <img
              v-if="scope.empStatus === 4"
              style="position: absolute; top: -21px; left: -8px; width: 45px"
              src="../../../../assets/shebao/离职.png"
              alt=""
            />
          </div>
          {{ scope.empName || "-" }}
        </template>
      </a-table-column>
      <a-table-column title="身份证号" :width="200" :ellipsis="true" fixed="left">
        <template slot-scope="scope">
          {{ scope.idCard || "-" }}
        </template>
      </a-table-column>
      <a-table-column title="社保状态" :width="120" :ellipsis="true">
        <template slot-scope="scope">
          <div>{{ getPostTypeNew(scope.empSocStatus) }}</div>
        </template>
      </a-table-column>
      <a-table-column title="医保状态" :width="120" :ellipsis="true">
        <template slot-scope="scope">
          <div>{{ getPostTypeNew(scope.empMeStatus) }}</div>
        </template>
      </a-table-column>
      <a-table-column title="公积金状态" :width="120" :ellipsis="true">
        <template slot-scope="scope">
          <div>{{ getPostTypeNew(scope.empPfStatus) }}</div>
        </template>
      </a-table-column>
      <a-table-column title="人员类型" :width="100" :ellipsis="true">
        <template slot-scope="scope">
          {{ scope.postType | filtersOptions(postTypeLst) }}
        </template>
      </a-table-column>
      <a-table-column title="参保城市" :width="100" :ellipsis="true">
        <template slot-scope="scope">
          <a-tooltip placement="top">
            <template slot="title">
              {{ scope.socCityName || "-" }}
            </template>
            {{ scope.socCityName || "-" }}
          </a-tooltip>
        </template>
      </a-table-column>
      <a-table-column title="社保账号" :width="120" :ellipsis="true">
        <template slot-scope="scope">
          {{ scope.socAccount }}
        </template>
      </a-table-column>
      <a-table-column title="医保账号" :width="120" :ellipsis="true">
        <template slot-scope="scope">
          {{ scope.meAccount }}
        </template>
      </a-table-column>
      <a-table-column title="公积金账号" :width="120" :ellipsis="true">
        <template slot-scope="scope">
          {{ scope.pfAccount }}
        </template>
      </a-table-column>
      <a-table-column title="签约主体" :width="120" :ellipsis="true">
        <template slot-scope="scope">
          {{ scope.contractSubject }}
        </template>
      </a-table-column>
      <a-table-column title="参保方案" :width="100" :ellipsis="true">
        <template slot-scope="scope">
          {{ scope.socProgName || "-" }}
        </template>
      </a-table-column>
      <a-table-column title="参保时间" :width="120" :ellipsis="true">
        <template slot-scope="scope">
          {{ formatDate(scope.socDate) || "-" }}
        </template>
      </a-table-column>
      <a-table-column title="停保时间" :width="120" :ellipsis="true">
        <template slot-scope="scope">
          {{ formatDate(scope.stopSocDate) || "-" }}
        </template>
      </a-table-column>
      <a-table-column title="封存时间" :width="120" :ellipsis="true">
        <template slot-scope="scope">
          {{ formatDate(scope.sealedDate) || "-" }}
        </template>
      </a-table-column>
      <a-table-column title="单位社保" :width="100" :ellipsis="true">
        <template slot-scope="scope">
          {{ scope.companySocAmount }}
        </template>
      </a-table-column>
      <a-table-column title="个人社保" :width="100" :ellipsis="true">
        <template slot-scope="scope">
          {{ scope.personalSocAmount }}
        </template>
      </a-table-column>
      <a-table-column title="单位公积金" :width="120" :ellipsis="true">
        <template slot-scope="scope">
          {{ scope.companyPfAmount }}
        </template>
      </a-table-column>
      <a-table-column title="个人公积金" :width="120" :ellipsis="true">
        <template slot-scope="scope">
          {{ scope.personalPfAmount }}
        </template>
      </a-table-column>
      <a-table-column title="社保总计" :width="100" :ellipsis="true">
        <template slot-scope="scope">
          {{ scope.socAmount }}
        </template>
      </a-table-column>
      <a-table-column title="公积金总计" :width="120" :ellipsis="true">
        <template slot-scope="scope">
          {{ scope.pfAmount }}
        </template>
      </a-table-column>
      <a-table-column title="操作" :width="80" fixed="right">
        <template slot-scope="scope">
          <a-button type="link" @click="detailed(scope)"> 详情 </a-button>
        </template>
      </a-table-column>
    </a-table>
    <!-- 分页 -->
    <div class="ta-right mt16">
      <a-pagination
        :current="queryParams.pageNo"
        show-quick-jumper
        show-size-changer
        :default-current="1"
        @change="onChange"
        :pageSizeOptions="['10', '20', '150', '200']"
        :total="total"
        @showSizeChange="showSizeChange"
        :show-total="(total) => `共 ${total} 条`"
      />
    </div>
    <!-- 导出自定义表头 -->
    <a-modal
      title="自定义表头"
      :visible="visible"
      :maskClosable="false"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      :width="800"
      @cancel="handleCancel"
    >
      <!-- 自定义表头 -->
      <Transfer
        ref="transfer"
        :defaultSelectedKeys="defaultSelectedKeys"
        :checkedKey="checkedKey"
        :transferData="selectAllHeadData"
      ></Transfer>
    </a-modal>
    <a-modal title="数据同步" :visible="isCloseMethod" width="620px" :destroy-on-close="true" :mask-closable="false" @cancel="cancelSyn">
      <template slot="footer">
        <a-button @click="cancelSyn"> 取消 </a-button>
        <a-button type="primary" @click="SyncHandle" :disabled="spinning">
          {{ spinning ? "数据同步中" : "确认同步" }}
        </a-button>
      </template>
      <a-spin :spinning="spinning">
        <div style="padding-left: 100px">
          <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-form-item class="baseInfo-item" label="数据同步时间" required>
              <a-range-picker
                ref="date"
                :placeholder="['开始月份', '结束月份']"
                format="YYYY-MM"
                style="width: 60%; margin-left: 20px"
                :value="value"
                :mode="mode2"
                :allowClear="false"
                @panelChange="handlePanelChange2"
              >
                <template slot="renderExtraFooter">
                  <a-button key="submit" type="primary" style="margin-left: 460px" @click="dateOk"> 确定 </a-button>
                </template>
              </a-range-picker>
            </a-form-item>

            <a-form-item label="选择城市" required>
              <a-select
                :default-value="defaultFangan === 0 ? '请选择社保所在城市' : defaultFangan"
                style="width: 60%; margin-left: 20px"
                @change="chooseProgName"
                placeholder="请选择社保所在城市"
              >
                <a-select-option v-for="item in progNameList" :key="item.areaId">{{ item.areaName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </div>

        <div v-if="defaultFangan !== 0" class="modal-box2" style="display: flex; justify-content: space-between">
          <div class="onwork">
            <div class="dataInfo2">
              <img src="@/assets/home/shuju1.png" style="width: 16px; height: 16px; margin-right: 10px" />
              <div style="color: #55565d; font-size: 14px; font-weight: 700">社保数据同步</div>
            </div>
            <div class="dataInfo2" style="margin-top: 15px">
              <div style="color: #767885; font-size: 12px; margin-right: 12px">账号名称</div>
              <a-tooltip
                :style="[
                  { color: '#55565D' },
                  { fontSize: '12px' },
                  { width: '80px' },
                  { overflow: 'hidden' },
                  { whiteSpace: 'nowrap' },
                  { textOverflow: 'ellipsis' }
                ]"
              >
                <template slot="title">
                  <span>{{ shebaoLogin.accountName }}</span>
                </template>
                {{ shebaoLogin.accountName }}
              </a-tooltip>
            </div>
            <div class="dataInfo2" style="margin-top: 15px">
              <div style="color: #767885; font-size: 12px">登录状态</div>
              <div
                :style="[
                  { color: shebaoLogin.isLogin ? '#6A66F6' : '#A6A8B4' },
                  { fontSize: '12px' },
                  { marginLeft: '12px' },
                  { cursor: !shebaoLogin.isLogin ? 'pointer' : '' }
                ]"
                @click="Login(1)"
              >
                {{ shebaoLogin.isLogin ? "已登录" : "未登录" }}
              </div>
            </div>
            <div class="dataInfo2" style="margin-top: 15px">
              <div style="color: #767885; font-size: 12px">是否同步</div>
              <a-switch style="margin-left: 12px" :disabled="!shebaoLogin.isLogin" @change="onShebaoChange" />
            </div>
          </div>
          <div class="onwork" style="margin-left: 15px; margin-right: 15px">
            <div class="dataInfo2">
              <img src="@/assets/home/shuju2.png" style="width: 16px; height: 16px; margin-right: 10px" />
              <div style="color: #55565d; font-size: 14px; font-weight: 700">医保数据同步</div>
            </div>
            <div class="dataInfo2" style="margin-top: 15px">
              <div style="color: #767885; font-size: 12px; margin-right: 12px">账号名称</div>
              <a-tooltip
                :style="[
                  { color: '#55565D' },
                  { fontSize: '12px' },
                  { width: '80px' },
                  { overflow: 'hidden' },
                  { whiteSpace: 'nowrap' },
                  { textOverflow: 'ellipsis' }
                ]"
              >
                <template slot="title">
                  <span>{{ yibaoLogin.accountName }}</span>
                </template>
                {{ yibaoLogin.accountName }}
              </a-tooltip>
            </div>
            <div class="dataInfo2" style="margin-top: 15px">
              <div style="color: #767885; font-size: 12px">登录状态</div>
              <div
                :style="[
                  { color: yibaoLogin.isLogin ? '#6A66F6' : '#A6A8B4' },
                  { fontSize: '12px' },
                  { marginLeft: '12px' },
                  { cursor: !yibaoLogin.isLogin ? 'pointer' : '' }
                ]"
                @click="Login(2)"
              >
                {{ yibaoLogin.isLogin ? "已登录" : "未登录" }}
              </div>
            </div>
            <div class="dataInfo2" style="margin-top: 15px">
              <div style="color: #767885; font-size: 12px">是否同步</div>
              <a-switch style="margin-left: 12px" :disabled="!yibaoLogin.isLogin" @change="onYibaoChange" />
            </div>
          </div>
          <div class="onwork">
            <div class="dataInfo2">
              <img src="@/assets/home/shuju.png" style="width: 16px; height: 16px; margin-right: 10px" />
              <div style="color: #55565d; font-size: 14px; font-weight: 700">公积金数据同步</div>
            </div>
            <div class="dataInfo2" style="margin-top: 15px">
              <div style="color: #767885; font-size: 12px; margin-right: 12px"></div>
              <a-tooltip
                :style="[
                  { color: '#55565D' },
                  { fontSize: '12px' },
                  { width: '80px' },
                  { overflow: 'hidden' },
                  { whiteSpace: 'nowrap' },
                  { textOverflow: 'ellipsis' }
                ]"
              >
                <template slot="title">
                  <span>{{ gongjijinLogin.accountName }}</span>
                </template>
                {{ gongjijinLogin.accountName }}
              </a-tooltip>
            </div>
            <div class="dataInfo2" style="margin-top: 15px">
              <div style="color: #767885; font-size: 12px">登录状态</div>
              <div
                :style="[
                  { color: gongjijinLogin.isLogin ? '#6A66F6' : '#A6A8B4' },
                  { fontSize: '12px' },
                  { marginLeft: '12px' },
                  { cursor: !gongjijinLogin.isLogin ? 'pointer' : '' }
                ]"
                @click="Login(3)"
              >
                {{ gongjijinLogin.isLogin ? "已登录" : "未登录" }}
              </div>
            </div>
            <div class="dataInfo2" style="margin-top: 15px">
              <div style="color: #767885; font-size: 12px">是否同步</div>
              <a-switch style="margin-left: 12px" :disabled="!gongjijinLogin.isLogin" @change="onGongjijinChange" />
            </div>
          </div>
        </div>
        <div
          style="
            background-color: #faf9f9;
            border-radius: 5px;
            padding-left: 15px;
            padding-top: 15px;
            padding-right: 15px;
            padding-bottom: 15px;
          "
        >
          <div sytle="font-size:14px;color:#55565D;font-weight:bold;">温馨提示</div>

          <div class="rowdalog2">
            <div style="font-size: 12px; color: #a6a8b4">1、同步数据需开启</div>
            <div class="edit" style="font-size: 12px; margin-left: 5px; cursor: pointer" @click="download">大数据助手</div>
            <div style="font-size: 12px; color: #a6a8b4">插件，并登录相应网站才可使用</div>
          </div>
          <div class="rowdalog2">
            <div style="font-size: 12px; color: #a6a8b4">2、导入人员名单需在花名册中，否则需先至花名册中新建。</div>
            <div class="edit" style="font-size: 12px; margin-left: 5px; cursor: pointer" @click="huamingce">立即前往</div>
          </div>
        </div>
      </a-spin>
    </a-modal>

    <a-modal title="数据同步" :visible="confirmPlanZengVisible" @cancel="cancelSyn" width="1020px" @ok="cancelSyn">
      <template slot="footer">
        <a-button key="submit" type="primary" @click="cancelSyn"> 确定 </a-button>
      </template>
      <div style="display: flex; flex-direction: row; width: 100%; align-items: center; margin-bottom: 20px">
        <a-month-picker :disabled-date="disabledDate" placeholder="选择月份" allow-clear @change="onMonthChange" />
        <a-input-search
          v-model="searchContent"
          allow-clear
          class="mr12"
          placeholder="搜索姓名/身份证"
          style="width: 180px; margin-left: 20px"
          @search="handleChange"
        />
        <a-select class="mr12" style="width: 136px" placeholder="选择险种" allow-clear @change="handleChangeStaff">
          <a-select-option v-for="(item, index) in staffSort" :key="index" :value="item.key">{{ item.name }}</a-select-option>
        </a-select>
      </div>

      <a-table
        :columns="columnDialogDetailguding"
        :data-source="dataDetail2"
        :scroll="{ y: 440 }"
        :pagination="pagination"
        @change="handlePageChange"
        row-key="id"
      >
        <template slot="belongsDate" slot-scope="text">
          <span>{{ formatDate2(text) }}</span>
        </template>
        <template slot="persentCompany" slot-scope="text">
          <span>{{ text }}%</span>
        </template>
        <template slot="persentPersonal" slot-scope="text">
          <span>{{ text }}%</span>
        </template>
      </a-table>
    </a-modal>
    <BatchAdd v-model="isLock" :arr="selectedRowKeys" @tap="tap" />
  </div>
</template>

<script>
import { formatDate } from "@/utils/index";
import CountTo from "vue-count-to";
import moment from "moment";
import { listData, selectEmpSocListCount, Enum, getCity, getCityAcc, syncData } from "./api";
import { AreaPicker } from "xqjr-plugin-common";
import { socTypeSource } from "./../funcs";
import _ from "lodash";
import SelectWithInputAdd from "xqjr-plugin-form/components/XqSelectWithInputAdd.vue";
const columnDialogDetailguding = [
  {
    title: "姓名",
    dataIndex: "empName",
    fixed: "left",
    align: "center",
    ellipsis: true,
    width: 80
  },
  {
    title: "身份证",
    dataIndex: "idCard",
    align: "center",
    ellipsis: true,
    width: 200
  },
  {
    title: "数据所属月份",
    dataIndex: "paymentBelongsDate",
    align: "center",
    ellipsis: true,
    width: 90
  },
  {
    title: "险种",
    dataIndex: "itemName",
    align: "center",
    ellipsis: true,
    width: 90
  },
  {
    title: "缴费类型",
    dataIndex: "payCostType",
    align: "center",
    ellipsis: true,
    width: 90
  },

  {
    title: "个人缴费金额",
    dataIndex: "amountPersonal",
    align: "center",
    ellipsis: true,
    width: 80
  },
  {
    title: "单位缴费金额",
    dataIndex: "amountCompany",
    align: "center",
    ellipsis: true,
    width: 80
  }
];
export default {
  components: {
    SelectWithInputAdd,
    CountTo,
    AreaPicker,
    BatchAdd: () => import("../components/batchAdd")
  },
  data() {
    return {
      socTypeSource,
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showQuickJumper: true
      },
      columnDialogDetailguding,
      dataDetail2: [],
      dataDetailOrgin: [],
      spinning: false,
      confirmPlanZengVisible: false,
      shebaoSwitch: false,
      yibaoSwitch: false,
      gongjijinSwitch: false,
      shebaoLogin: {
        accountId: null,
        accountName: null,
        accountType: "社保",
        areaId: "282",
        areaName: null,
        cookie: null,
        extraField: null,
        isLogin: false
      },
      yibaoLogin: {
        accountId: null,
        accountName: null,
        accountType: "医保",
        areaId: "282",
        areaName: null,
        cookie: null,
        extraField: null,
        isLogin: false
      },
      gongjijinLogin: {
        accountId: null,
        accountName: null,
        accountType: "公积金",
        areaId: "282",
        areaName: null,
        cookie: null,
        extraField: null,
        isLogin: false
      },
      syncDate: [], // 时间

      mode2: ["month", "month"],
      value: [],
      defaultFangan: 0,
      progNameList: [],
      visible: false,
      isCloseMethod: false,
      confirmLoading: false,
      socCityName: "",
      active: 0,
      checkedKey: {
        checkedKeys: [],
        rightData: []
      },
      loading: true,
      empSocStatusOptions: [], // 社保状态枚举
      payTypeOptions: [], // 缴费类型枚举
      progTypeOptions: [], // 参保方案枚举
      selectAllHeadData: [], // 导出表头信息
      defaultSelectedKeys: [],
      topData: [
        {
          title: "全部人数",
          num: 0,
          empIdList: [],
          url: require("../../../../assets/shebao/全部.png")
        },
        {
          title: "正常参保",
          num: 0,
          empIdList: [],
          url: require("../../../../assets/shebao/正常参保.png")
        },
        {
          title: "增员/待增员人数",
          num: 0,
          empIdList: [],
          url: require("../../../../assets/shebao/增员减员.png")
        },
        {
          title: "减员/待减员人数",
          num: 0,
          empIdList: [],
          url: require("../../../../assets/shebao/减员.png")
        },
        {
          title: "未参保/停保",
          num: 0,
          empIdList: [],
          url: require("../../../../assets/shebao/停保.png")
        }
      ],
      selectedRowKeys: [],
      searchVisible: false,
      staffSort: [
        { name: "养老保险", key: "1" },
        { name: "工伤保险", key: "2" },
        { name: "失业保险", key: "3" },
        { name: "医疗保险", key: "4" },
        { name: "生育保险", key: "5" },
        { name: "公积金", key: "6" }
      ],
      // 查询参数
      queryParams: {
        companyId: this.$store.state.hr.companyId,
        pageNo: 1,
        pageSize: 10,
        nameOrIdCard: "",
        empSocStatusString: ""
      },
      form: {
        progTypeOptions: "",
        socCityId: "",
        stopSocDate: "",
        sealedDate: "",
        empSocDate: "",
        empSocStatus: undefined,
        empMeStatus: undefined,
        empPfStatus: undefined
      },
      // 总条数
      total: 0,
      // 查询社保名单表格数据
      tableData: [],

      xianzhong: "",
      searchContent: "",
      filterMonth: "",
      needSyncDate: [
        { areId: 283, needSyncType: ["医保"] } // 青岛医保
      ],
      yibaoSycnData: [],
      shebaoSycnData: [],
      gongjijinSycnData: [],
      liststatus: [
        { value: "待入职", id: "1" },
        { value: "在职", id: "2" },
        { value: "待离职", id: "3" },
        { value: "离职", id: "4" }
      ],
      rStatus: undefined,
      isLock: false,
      socAccount: null,
      meAccount: null,
      pfAccount: null,
      contractSubject: null
    };
  },
  computed: {
    postTypeLst() {
      return this.$store.state.enums.postTypeLst;
    }
  },
  created() {
    if (JSON.stringify(this.$getCondition("sbmd_condition")) !== "{}") {
      var ps = JSON.parse(this.$getCondition("sbmd_condition"));
      if (ps.companyId && ps.companyId === this.$store.state.hr.companyId) {
        if (ps.nameOrIdCard) {
          this.queryParams.nameOrIdCard = ps.nameOrIdCard;
        }
        if (ps.status) {
          this.rStatus = ps.status;
        }
        if (ps.active) {
          this.active = ps.active;
        }
        if (ps.empSocStatusString) {
          this.queryParams.empSocStatusString = ps.empSocStatusString;
        }
        if (ps.progTypeOptions) {
          this.form.progTypeOptions = ps.progTypeOptions;
        }
        if (ps.socCityId) {
          this.form.socCityId = ps.socCityId;
        }
        if (ps.stopSocDate) {
          this.form.stopSocDate = ps.stopSocDate;
        }
        if (ps.sealedDate) {
          this.form.sealedDate = ps.sealedDate;
        }
        if (ps.empSocDate) {
          this.form.empSocDate = ps.empSocDate;
        }
        if (ps.socAccount) {
          this.socAccount = ps.socAccount;
        }
        if (ps.meAccount) {
          this.meAccount = ps.meAccount;
        }
        if (ps.pfAccount) {
          this.pfAccount = ps.pfAccount;
        }
        if (ps.contractSubject) {
          this.contractSubject = ps.contractSubject;
        }

        // 读取缓存
        if (this.$getPageSize("sbmd_condition")) {
          this.pagination.pageSize = this.queryParams.pageSize =
            parseInt(this.$getPageSize("sbmd_condition")) === 1 ? 10 : parseInt(this.$getPageSize("sbmd_condition"));
        }

        if (this.$getPage("sbmd_condition")) {
          this.queryParams.pageNo = this.pagination.current =
            parseInt(this.$getPage("sbmd_condition")) === 0 ? 1 : parseInt(this.$getPage("sbmd_condition"));
        }
      }
    }

    this.getEnum();
    this.getSelectEmpSocListCount();

    var that = this;
    // 监听来自插件的同步数据
    document.addEventListener("SynDataButton", function (e) {
      that.spinning = false;
      switch (e.detail.from) {
        case "青岛医保":
          var count = e.detail.arry.length;
          for (var i = 0; i < count; i++) {
            that.yibaoSycnData.push(e.detail.arry[i]);
          }
          break;
      }
    });
  },
  filters: {
    // 过滤枚举
    filtersOptions(a, b) {
      const data = b.filter((item) => item.value === a);
      return data.length > 0 ? data[0].label : "-";
    }
  },
  methods: {
    getPostTypeNew(val) {
      return socTypeSource[val]["label"];
    },
    // 按人员状态检索
    handleProgName2(val) {
      this.rStatus = val;
      this.queryParams.pageNo = 1;
      this.getList();
    },
    handleChange(e) {
      this.pagination.current = 1;
      this.filterDate();
    },
    handleChangeStaff(e) {
      this.pagination.current = 1;
      if (e === undefined) {
        this.xianzhong = "";
      } else {
        switch (e) {
          case "1":
            this.xianzhong = "养老保险";
            break;
          case "2":
            this.xianzhong = "工伤保险";
            break;
          case "3":
            this.xianzhong = "失业保险";
            break;
          case "4":
            this.xianzhong = "医疗保险";
            break;
          case "5":
            this.xianzhong = "生育保险";
            break;
          case "6":
            this.xianzhong = "公积金";
            break;
        }
      }
      this.filterDate();
    },
    onMonthChange(date, dateString) {
      this.pagination.current = 1;
      this.filterMonth = dateString;
      this.filterDate();
    },
    getEmyState(record) {
      // {增员: 2, 减员: 4, 未参保: 0, 停保: 6, 正常参保: 1, 待增员: 3, 待减员: 5}
      var status = "";
      switch (record.socStatus) {
        case 0:
          status += "社保未参保";
          break;
        case 1:
          status += "社保正常参保";
          break;
        case 2:
          status += "社保增员";
          break;
        case 3:
          status += "社保待增员";
          break;
        case 4:
          status += "社保减员";
          break;
        case 5:
          status += "社保待减员";
          break;
        case 6:
          status += "社保停保";
          break;
      }
      switch (record.meStatus) {
        case 0:
          status += "/医保未参保";
          break;
        case 1:
          status += "/医保正常参保";
          break;
        case 2:
          status += "/医保增员";
          break;
        case 3:
          status += "/医保待增员";
          break;
        case 4:
          status += "/医保减员";
          break;
        case 5:
          status += "/医保待减员";
          break;
        case 6:
          status += "/医保停保";
          break;
      }
      switch (record.pfStatus) {
        case 0:
          status += "/公积金未参保";
          break;
        case 1:
          status += "/公积金正常参保";
          break;
        case 2:
          status += "/公积金增员";
          break;
        case 3:
          status += "/公积金待增员";
          break;
        case 4:
          status += "/公积金减员";
          break;
        case 5:
          status += "/公积金待减员";
          break;
        case 6:
          status += "/公积金停保";
          break;
      }
      return status;
    },
    // 过滤数据再分页
    filterDate() {
      var len = this.dataDetailOrgin.length;
      this.dataDetail2 = [];
      for (var i = 0; i < len; i++) {
        if (
          (this.dataDetailOrgin[i].empName.indexOf(this.searchContent) !== -1 ||
            this.dataDetailOrgin[i].idCard.indexOf(this.searchContent) !== -1) &&
          this.dataDetailOrgin[i].itemName.indexOf(this.xianzhong) !== -1 &&
          this.dataDetailOrgin[i].paymentBelongsDate.indexOf(this.filterMonth) !== -1
        ) {
          this.dataDetail2.push(this.dataDetailOrgin[i]);
        }
      }
      this.pagination.total = this.dataDetail2.length;
    },
    disabledDate(current) {
      return current && (current <= this.value[0] || current >= moment(this.value[1]).subtract(-1, "months"));
    },
    Login(index) {
      switch (index) {
        case 1: // 社保
          if (this.shebaoLogin.loginUrl !== null && this.shebaoLogin.loginUrl.length !== 0) {
            window.open(this.shebaoLogin.loginUrl);
          }

          break;
        case 2: // 医保
          if (this.yibaoLogin.loginUrl !== null && this.yibaoLogin.loginUrl.length !== 0) {
            window.open(this.yibaoLogin.loginUrl);
          }

          break;
        case 3: // 公积金
          if (this.gongjijinLogin.loginUrl !== null && this.gongjijinLogin.loginUrl.length !== 0) {
            window.open(this.gongjijinLogin.loginUrl);
          }
          break;
      }
    },
    SyncHandle() {
      if (this.syncDate.length === 0) {
        this.$message.error("请选择数据同步时间");
        return;
      }
      if (this.defaultFangan === 0) {
        this.$message.error("请选择城市");
        return;
      }
      if (this.shebaoSwitch === false && this.yibaoSwitch === false && this.gongjijinSwitch === false) {
        this.$message.success("请选择要同步的数据");
        return;
      }
      this.spinning = true;

      let beanName = "";
      for (var i = 0; i < this.progNameList.length; i++) {
        if (this.progNameList[i].areaId === this.defaultFangan) {
          beanName = this.progNameList[i].syncServiceBeanName;
          break;
        }
      }

      syncData({
        areaId: this.defaultFangan,
        companyId: this.$store.state.hr.companyId,
        endDate: this.syncDate[1],
        socIsTrue: this.shebaoSwitch,
        meIsTrue: this.yibaoSwitch,
        pfIsTrue: this.gongjijinSwitch,
        startDate: this.syncDate[0],
        syncServiceBeanName: beanName,
        socInfo: this.shebaoSycnData,
        meInfo: this.yibaoSycnData,
        pfInfo: this.gongjijinSycnData
      })
        .then((res) => {
          this.spinning = false;

          this.dataDetailOrgin = res.data;
          this.dataDetail2 = this.dataDetailOrgin;
          this.pagination.total = this.dataDetail2.length;

          this.pagination.current = 1;
          this.confirmPlanZengVisible = true;
          this.isCloseMethod = false;

          this.xianzhong = "";
          this.searchContent = "";
          this.filterMonth = "";
        })
        .catch((err) => {
          this.spinning = false;
          console.log("debug log --> ", err);
        });
    },

    // 分页查询
    handlePageChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
    },

    onShebaoChange(checked) {
      this.shebaoSwitch = checked;
    },

    onYibaoChange(checked) {
      this.yibaoSwitch = checked;
      if (this.yibaoSwitch === true) {
        // 检查该地区医保是否需要前端进行同步数据
        let isSync = false;
        for (var i = 0; i < this.needSyncDate.length; i++) {
          if (this.needSyncDate[i].areId === this.defaultFangan) {
            // 确认地区
            for (var j = 0; j < this.needSyncDate[i].needSyncType.length; j++) {
              if (this.needSyncDate[i].needSyncType[j] === "医保") {
                isSync = true;
                break;
              }
            }
            break;
          }
        }
        if (isSync) {
          // 需要同步
          switch (this.defaultFangan) {
            case 283: // 青岛地区
              this.spinning = true;
              window.postMessage(
                {
                  start: this.syncDate[0],
                  end: this.syncDate[1],
                  cookie: this.yibaoLogin.cookie,
                  type: "青岛医保" // 这个值会原封不动的传递回来
                },
                "*"
              );
              break;
          }
        }
      } else {
        this.yibaoSycnData = [];
      }
    },

    onGongjijinChange(checked) {
      this.gongjijinSwitch = checked;
    },

    huamingce() {
      this.$router.push({
        path: "/shebao/employee"
      });
    },
    download() {
      window.open("https://www.yuque.com/docs/share/aadc62e4-0ea4-4387-80f3-ad8cd724018f?#");
    },
    chooseProgName(value) {
      this.defaultFangan = value;
      this.spinning = true;
      getCityAcc({ areaId: this.defaultFangan })
        .then((res) => {
          for (var i = 0; i < res.data.length; i++) {
            if (res.data[i].accountType === "社保") {
              this.shebaoLogin = res.data[i];
            } else if (res.data[i].accountType === "医保") {
              this.yibaoLogin = res.data[i];
            } else if (res.data[i].accountType === "公积金") {
              this.gongjijinLogin = res.data[i];
            }
          }
          this.spinning = false;
        })
        .catch((err) => {
          this.$message.error("失败!");
          this.spinning = false;
          console.log("debug log --> ", err);
        });
    },
    dateOk() {
      this.$refs.date.$refs.picker.sOpen = false;
    },
    handlePanelChange2(value, mode) {
      this.value = value;
      this.syncDate = [];
      this.syncDate.push(moment(value[0]).format("YYYYMM"));
      this.syncDate.push(moment(value[1]).format("YYYYMM"));

      // this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
    },

    formatDate(text) {
      return formatDate(text);
    },
    OnsearchRef() {
      this.form = {
        progTypeOptions: "",
        socCityId: "",
        stopSocDate: "",
        sealedDate: "",
        empSocDate: ""
      };
      this.socAccount = null;
      this.meAccount = null;
      this.pfAccount = null;
      this.contractSubject = null;
      this.getList();
    },
    // 批量正常参保
    onBatchNormalSoc() {
      this.isLock = true;
    },
    checkboxChange(list) {},
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      const data = {
        ...this.queryParams,
        ...this.form,
        companyId: this.$store.state.hr.companyId
      };
      if (this.socAccount) {
        data["socAccount"] = this.socAccount;
      }
      if (this.meAccount) {
        data["meAccount"] = this.meAccount;
      }
      if (this.pfAccount) {
        data["pfAccount"] = this.pfAccount;
      }
      if (this.contractSubject) {
        data["contractSubject"] = this.contractSubject;
      }
      data.empSocStatusString = this.active ? this.topData[this.active].empIdList.join(",") : "";
      if (this.rStatus) {
        data.status = this.rStatus;
      }
      this.$exportFilePost("/hr/api/v1/empSocTransform/export", data, "社保名单");
    },
    handleCancel(e) {
      this.$refs.transfer.checkedKeys = [];
      this.$refs.transfer.rightData = [];
      this.visible = false;
    },
    cancelSyn() {
      this.isCloseMethod = false;

      this.confirmPlanZengVisible = false;
    },
    onDataSyn() {
      this.syncDate = [];
      this.defaultFangan = 0;
      this.value = [];
      this.spinning = false;
      getCity({ isDistinct: true })
        .then((res) => {
          if (res.data != null) {
            if (res.data != null) {
              this.progNameList = [];
              for (var i = 0; i < res.data.length; i++) {
                this.progNameList.push(res.data[i]);
              }
            }
          }
        })
        .catch((err) => {
          this.$message.error("失败!");
          console.log("debug log --> ", err);
        });

      this.isCloseMethod = true;
    },

    // 导出
    onExport() {
      this.handleOk();
    },
    tableChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
    },
    // 处理城市
    handleCity(e) {
      if (e.value.length > 0) {
        const value = e.value;
        const label = e.label;
        this.form.socCityId = value[value.length - 1].toString();
        if (label.length && label.length === 3) {
          this.socCityName = label[0] + "/" + label[1] + "/" + label[2];
        } else if (label.length && label.length === 2) {
          this.socCityName = label[0] + "/" + label[1];
        }
      } else {
        this.form.socCityId = "";
        this.socCityName = "";
      }
    },
    getEnum() {
      // this.isTop = false;
      Enum(this.$store.state.hr.companyId)
        .then((res) => {
          this.payTypeOptions = [];
          this.progTypeOptions = [];
          this.empSocStatusOptions = [];

          if (Object.keys(res.data.socPayCostTypeMap).length > 0) {
            for (const key in res.data.socPayCostTypeMap) {
              this.payTypeOptions.push({
                value: res.data.socPayCostTypeMap[key],
                label: key
              });
            }
          }

          if (Object.keys(res.data.empSocStatusMap).length > 0) {
            for (const key in res.data.empSocStatusMap) {
              if (key === "正常参保") {
                this.topData[1].empIdList.push(res.data.empSocStatusMap[key]);
              }
              if (key === "增员") {
                this.topData[2].empIdList.push(res.data.empSocStatusMap[key]);
              }
              if (key === "待增员") {
                this.topData[2].empIdList.push(res.data.empSocStatusMap[key]);
              }

              if (key === "待减员") {
                this.topData[3].empIdList.push(res.data.empSocStatusMap[key]);
              }
              if (key === "减员") {
                this.topData[3].empIdList.push(res.data.empSocStatusMap[key]);
              }
              if (key === "未参保") {
                this.topData[4].empIdList.push(res.data.empSocStatusMap[key]);
              }
              if (key === "停保") {
                this.topData[4].empIdList.push(res.data.empSocStatusMap[key]);
              }

              this.empSocStatusOptions.push({
                value: res.data.empSocStatusMap[key],
                label: key
              });
            }
          }

          if (Object.keys(res.data.socProgMap).length > 0) {
            for (const key in res.data.socProgMap) {
              this.progTypeOptions.push({
                value: res.data.socProgMap[key],
                label: key
              });
            }
          }

          this.getList();
        })
        .catch((err) => {
          console.log("debug log --> ", err);
          this.$message.error("失败!");
        });
    },
    detailed(data) {
      this.$router.push({
        path: `shebaoMingDan/detailed/${data.empId}`,
        query: {
          prevpage: "/shebao/shebaoMingDan"
        }
      });
    },
    showSizeChange(current, size) {
      this.queryParams.pageNo = 1;
      this.queryParams.pageSize = size;
      this.getList();
    },
    onTopTabs(data, index) {
      this.active = index;
      this.queryParams.pageNo = 1;
      this.getList();
    },
    // 查询社保名单顶部数量统计
    getSelectEmpSocListCount() {
      selectEmpSocListCount({ companyId: this.$store.state.hr.companyId })
        .then((res) => {
          this.topData[0].num = res.data.allCount || 0;
          this.topData[1].num = res.data.normalSocCount || 0;
          this.topData[2].num = res.data.increaseCount + res.data.waitIncreaseCount || 0;
          this.topData[3].num = res.data.decreaseCount + res.data.waitDecreaseCount || 0;
          this.topData[4].num = res.data.stopSocCount + res.data.notSocCount || 0;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
          this.$message.error("失败!");
        });
    },
    /** 查询社保名单列表 */
    getList() {
      this.loading = true;
      const data = { ...this.queryParams, ...this.form };
      if (this.socAccount) {
        data["socAccount"] = this.socAccount;
      }
      if (this.meAccount) {
        data["meAccount"] = this.meAccount;
      }
      if (this.pfAccount) {
        data["pfAccount"] = this.pfAccount;
      }
      if (this.contractSubject) {
        data["contractSubject"] = this.contractSubject;
      }
      data.empSocStatusString = this.active ? this.topData[this.active].empIdList.join(",") : "";
      if (this.rStatus) {
        data.status = this.rStatus;
      }

      listData(data)
        .then((res) => {
          this.tableData = res.data.entities;
          this.total = res.data.entityCount;
          setTimeout(() => {
            this.loading = false;
          }, 500);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
          this.$message.error("查询社保名单列表失败!");

          setTimeout(() => {
            this.loading = false;
          }, 500);
        });

      // 缓存
      if (this.active) {
        data.active = this.active;
      }
      this.$setCondition("sbmd_condition", JSON.stringify(data));
      this.$setPage("sbmd_condition", this.queryParams.pageNo + "");
      this.$setPageSize("sbmd_condition", this.queryParams.pageSize + "");
    },
    // 分页变化
    onChange(pageNumber) {
      this.queryParams.pageNo = pageNumber;
      this.getList();
    },
    tap() {
      this.selectedRowKeys = [];
      this.getList();
      this.getEnum();
      this.getSelectEmpSocListCount();
    }
  }
};
</script>

<style lang="scss" scoped>
.dataInfo2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.edit {
  color: var(--primary);
}
.modal-box2 {
  margin-bottom: 20px;
  text-align: center;
  .set-btn {
    margin-top: 40px;
  }
}
.rowdialog {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
}
.top_warp {
  display: flex;
  align-items: center;
  img {
    margin-right: 8px;
  }
  .top_number {
    font-size: 24px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #55565d;
  }
  .top_title {
    font-size: 14px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #767885;
  }
}
.rowdalog2 {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.onwork {
  background-color: #faf9f9;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  padding: 16px 16px;
  display: flex;
  flex-flow: column;
  // align-items: center;
  width: 33%;
}
.warp_dian {
  color: #ffa600;
  display: flex;
  align-items: center;
  .dian {
    margin-right: 5px;
    display: block;
    width: 4px;
    height: 4px;
    background: #ffa600;
    border-radius: 2px;
  }
}
.baseInfo-item {
  display: flex;
  flex-flow: row;
  // align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.baseInfo-item2 {
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-bottom: 10px;
}
.shebao-base-box {
  width: 100%;
  background: #e8e8e8;
  margin: 24px 0;
  .base-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 12px;
    background: #e8e8e8;
    border-bottom: 1px solid #eee;
    span {
      margin-left: 5px;
    }
  }
  .baseInfo {
    padding: 24px 0 24px 56px;

    input,
    span {
      margin-left: 40px;
    }
  }
  .baseInfo-box {
    padding: 24px 0 12px 24px;
    input,
    span {
      margin-left: 10px;
    }
  }
}
</style>
